<template>
	<view class="content">
		<view class="top" :class="{top2: isPhone }">
			<view v-if="info.userProfileDO" class="section">
				<view class="section-top">
					<view>{{info.userProfileDO.realName || '姓名：未填写'}}</view>
					<view class="avatar">
						<image v-if="info.userProfileDO.avatar" :src="info.userProfileDO.avatar" mode="scaleToFill">
						</image>
						<open-data v-else type="userAvatarUrl"></open-data>
					</view>
				</view>
				<view class="section-bottom">
					<image src="https://ywtmp.hnwytkj.com/static/images/pic.png" mode="" class="background-icon">
					</image>
					<view class="section-bottom-content">
						<view>{{info.userProfileDO.jobTitle || '职务：未填写'}}</view>
						<view class="mt24">{{info.companyProfileDO.companyName || '公司名称：未填写'}}</view>
						<view class="item-section mt36">
							<image src="https://ywtmp.hnwytkj.com/static/images/phone.png" mode="aspectFit"></image>
							<text>{{info.userProfileDO.phoneNumber || '未填写'}}</text>
						</view>
						<view class="item-section mt25">
							<image src="https://ywtmp.hnwytkj.com/static/images/wx.png" mode="aspectFit"></image>
							<text>{{info.userProfileDO.wechatId || '未填写'}}</text>
						</view>
						<view class="item-section mt26 address">
							<image src="https://ywtmp.hnwytkj.com/static/images/address.png" mode="aspectFit"></image>
							<text>{{info.companyProfileDO.address.address || '未填写'}}</text>
						</view>
					</view>
					<!-- <view class="edit-btn">编辑名片</view> -->
				</view>
			</view>
			<!-- 		<view v-if="isPhone" class="red-envelope" @tap="goToRedEnvelope">
			<image src="https://ywtmp.hnwytkj.com/static/images/red-envelope.png" mode="widthFix"></image>
		</view> -->
			<view class="action-section">
				<view class="action-btn" @tap="editInfo">编辑个人资料</view>
				<view class="action-btn btn2" @tap="editCompany">编辑企业资料</view>
				<view class="action-btn btn3" @tap="preview">预览</view>
			</view>
			<view class="num-box">
				<view>{{info.userProfileDO ? info.userProfileDO.viewCount : 0}}人浏览</view>
				<view>{{info.userProfileDO ? info.userProfileDO.likeCount : 0}}人获赞</view>
			</view>
		</view>
		<view v-if="info.companyProfileDO" class="bottom">
			<template v-for="(item, index) in modules" :key="item">
				<view v-if="modules.includes('companyRadar') && item === 'companyRadar'" class="introduce-item">
					<view class="title">
						<text>企业雷达</text>
						<view v-if="info.userProfileDO && info.userProfileDO.userType" class="right">
							<image src="https://ywtmp.hnwytkj.com/static/images/sort.png" mode=""
								@tap="setSort(item, index)"></image>
							<image src="https://ywtmp.hnwytkj.com/static/images/delete.png" mode=""
								@tap="remove(index)"></image>
						</view>
					</view>
					<view class="introduce-item-content">
						<view class="flex justify-between">
							<view class="item-content">
								<view>
									<view class="num">{{info.userProfileDO ? info.userProfileDO.shareCount : 0}}</view>
									<view>发送次数</view>
								</view>
							</view>
							<view class="item-content">
								<view>
									<view class="num">{{info.userProfileDO ? info.userProfileDO.viewCount : 0}}</view>
									<view>访问人数</view>
								</view>
							</view>
							<view class="item-content">
								<view>
									<view class="num">{{info.userProfileDO ? info.userProfileDO.linkCount : 0}}</view>
									<view>引流次数</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="modules.includes('companyImpression') && item === 'companyImpression'"
					class="introduce-item">
					<view class="title">
						<text>企业印象</text>
						<view v-if="info.userProfileDO && info.userProfileDO.userType" class="right">
							<image src="https://ywtmp.hnwytkj.com/static/images/sort.png" mode=""
								@tap="setSort(item, index)"></image>
							<image src="https://ywtmp.hnwytkj.com/static/images/edit2.png" mode="" @tap="goEdit(item)">
							</image>
							<image src="https://ywtmp.hnwytkj.com/static/images/delete.png" mode=""
								@tap="remove(index)"></image>
						</view>
					</view>
					<view class="introduce-item-content">
						<view class="flex">
							<view v-for="(item, index) in info.companyProfileDO.companyImpression" :key="index"
								class="tag" :style="{color: item.color, background: calcColor(item.color) }">
								{{item.text}}</view>
						</view>
					</view>
				</view>
				<view v-if="modules.includes('companyIntro') && item === 'companyIntro'" class="introduce-item">
					<view class="title">
						<text>我的简介</text>
						<view v-if="info.userProfileDO && info.userProfileDO.userType" class="right">
							<image src="https://ywtmp.hnwytkj.com/static/images/sort.png" mode=""
								@tap="setSort(item, index)"></image>
							<image src="https://ywtmp.hnwytkj.com/static/images/edit2.png" mode="" @tap="goEdit(item)">
							</image>
							<image src="https://ywtmp.hnwytkj.com/static/images/delete.png" mode=""
								@tap="remove(index)"></image>
						</view>
					</view>
					<view class="introduce-item-content">
						<view>{{info.companyProfileDO.companyIntro}}</view>
					</view>
				</view>
				<view v-if="modules.includes('myImpression') && item === 'myImpression'" class="introduce-item">
					<view class="title">
						<text>我的印象</text>
						<view v-if="info.userProfileDO && info.userProfileDO.userType" class="right">
							<image src="https://ywtmp.hnwytkj.com/static/images/sort.png" mode=""
								@tap="setSort(item, index)"></image>
							<image src="https://ywtmp.hnwytkj.com/static/images/edit2.png" mode="" @tap="goEdit(item)">
							</image>
							<image src="https://ywtmp.hnwytkj.com/static/images/delete.png" mode=""
								@tap="remove(index)"></image>
						</view>
					</view>
					<view class="introduce-item-content">
						<view class="flex">
							<view v-for="(item, index) in info.companyProfileDO.myImpression" :key="index" class="tag"
								:style="{color: item.color, background: calcColor(item.color) }">{{item.text}}</view>
						</view>
					</view>
				</view>
				<view v-if="modules.includes('companyComments') && item === 'companyComments'" class="introduce-item">
					<view class="title">
						<text>企业介绍</text>
						<view v-if="info.userProfileDO && info.userProfileDO.userType" class="right">
							<image src="https://ywtmp.hnwytkj.com/static/images/sort.png" mode=""
								@tap="setSort(item, index)"></image>
							<image src="https://ywtmp.hnwytkj.com/static/images/edit2.png" mode="" @tap="goEdit(item)">
							</image>
							<image src="https://ywtmp.hnwytkj.com/static/images/delete.png" mode=""
								@tap="remove(index)"></image>
						</view>
					</view>
					<view class="introduce-item-content" v-if="info.companyProfileDO.companyComments">
						<view class="swiper">
							<swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
								<swiper-item v-for="(item, index) in info.companyProfileDO.companyComments.imgs"
									:key="index">
									<image :src="item" mode="aspectFit"></image>
								</swiper-item>
							</swiper>
						</view>
						<view class="text">{{info.companyProfileDO.companyComments.content}}</view>
					</view>
				</view>
				<view v-if="modules.includes('companyIntroImg') && item === 'companyIntroImg'" class="introduce-item">
					<view class="title">
						<text>图文介绍</text>
						<view v-if="info.userProfileDO && info.userProfileDO.userType" class="right">
							<image src="https://ywtmp.hnwytkj.com/static/images/sort.png" mode=""
								@tap="setSort(item, index)"></image>
							<image src="https://ywtmp.hnwytkj.com/static/images/edit2.png" mode="" @tap="goEdit(item)">
							</image>
							<image src="https://ywtmp.hnwytkj.com/static/images/delete.png" mode=""
								@tap="remove(index)"></image>
						</view>
					</view>
					<view class="introduce-item-content">
						<image v-for="(item, index) in info.companyProfileDO.companyIntroImg" :key="index" :src="item"
							mode="widthFix"></image>
					</view>
				</view>
				<view v-if="modules.includes('address') && item === 'address'" class="introduce-item">
					<view class="title">
						<text>企业地址</text>
						<view v-if="info.userProfileDO && info.userProfileDO.userType" class="right">
							<image src="https://ywtmp.hnwytkj.com/static/images/sort.png" mode=""
								@tap="setSort(item, index)"></image>
							<image src="https://ywtmp.hnwytkj.com/static/images/edit2.png" mode="" @tap="goEdit(item)">
							</image>
							<image src="https://ywtmp.hnwytkj.com/static/images/delete.png" mode=""
								@tap="remove(index)"></image>
						</view>
					</view>
					<view class="introduce-item-content">
						<view class="map">
							<map :latitude="info.companyProfileDO.address.latitude"
								:longitude="info.companyProfileDO.address.longitude" :markers="covers"></map>
						</view>
					</view>
				</view>
				<view v-if="modules.includes('companyVideo') && item === 'companyVideo'" class="introduce-item">
					<view class="title">
						<text>视频展示</text>
						<view v-if="info.userProfileDO && info.userProfileDO.userType" class="right">
							<image src="https://ywtmp.hnwytkj.com/static/images/sort.png" mode=""
								@tap="setSort(item, index)"></image>
							<image src="https://ywtmp.hnwytkj.com/static/images/edit2.png" mode="" @tap="goEdit(item)">
							</image>
							<image src="https://ywtmp.hnwytkj.com/static/images/delete.png" mode=""
								@tap="remove(index)"></image>
						</view>
					</view>
					<view class="introduce-item-content">
						<view class="placeholder">
							<video :src="info.companyProfileDO.companyVideo"></video>
						</view>
					</view>
				</view>
			</template>
			<view v-if="info.userProfileDO && info.userProfileDO.userType" class="introduce-item" @tap="addModule">
				<view class="title">新增宣传模块</view>
				<view class="introduce-item-content">
					<view class="add-btn">
						<image src="https://ywtmp.hnwytkj.com/static/images/add.png" mode=""></image>
						<text>点击开始添加</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <uv-tabbar :value="value" @change="index=>value = index">
		<uv-tabbar-item text="保存" icon="home"></uv-tabbar-item>
		<uv-tabbar-item text="分享" icon="photo"></uv-tabbar-item>
		<uv-tabbar-item text="拨号" icon="play-right"></uv-tabbar-item>
		<uv-tabbar-item text="导航" icon="account"></uv-tabbar-item>
		<uv-tabbar-item text="官网" icon="account"></uv-tabbar-item>
	</uv-tabbar> -->
		<!-- <TabBar/> -->
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	// import { TabBar } from '@/components/tabbar/index.vue'
	export default {
		// components: { TabBar },
		data() {
			return {
				info: {},
				modules: [],
				modulesMap: {
					'企业印象': 'companyImpression',
					'企业视频': 'companyVideo',
					'企业介绍': 'companyComments',
					'图文展示': 'companyIntroImg',
					'企业地址': 'address',
					'我的简介': 'companyIntro',
					'我的印象': 'myImpression',
					'企业雷达': 'companyRadar'
				},
				covers: [{
					id: 1,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: "/static/images/location.png",
					width: 30,
					height: 30,
				}, ],
				positions: [], // 所有项目的位置
				draggingIndex: -1, // 当前被拖拽的项的索引
				startY: 0, // 触摸开始时的Y坐标
				moveOffsetY: 0, // Y轴移动的距离
				isDragging: false, // 是否正在拖拽
				itemSize: 65,
				isPhone: false
			}
		},
		onLoad(options) {
			// if (options.id) {
			// 	const isPhone = this.isChinesePhoneNumber(options.id)
			// 	this.isPhone = isPhone
			// 	if (isPhone) {
			// 		getApp().globalData.business_id = options.id
			// 	}
			// } else {
			// 	if (getApp().globalData.business_id) {
			// 		this.isPhone = true
			// 	}
			// }
		},
		onShow() {
			this.getData()
		},
		methods: {
			isChinesePhoneNumber(phone) {
				const regex = /^1[3-9]\d{9}$/;
				return regex.test(phone);
			},
			goToRedEnvelope() {
				const business_id = getApp().globalData.business_id
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (res) => {
						uni.request({
							url: `https://newretail.3d89178.com.cn/api/Auth/getCardInfo?business_id=${business_id}&jscode=${res.code}`,
							success(response) {
								const {
									statusCode,
									data,
									errMsg
								} = response;
								if (statusCode === 200) {
									if (data.code === 200) {
										uni.navigateToMiniProgram({
											appId: 'wx534aae667bce24a9',
											path: `pages/index/index?business_id=${business_id}`,
										})
									} else {
										uni.showModal({
											title: '提示',
											content: '您必须创建了名片，才能领取红包，是否前往创建？',
											success: function(res) {
												if (res.confirm) {
													uni.navigateTo({
														url: '/pagesA/edit/editEnterpriseInformation'
													})
												}
											}
										});
									}
								} else {
									uni.showToast({
										title: errMsg,
										icon: 'none'
									});
								}
							}
						})
					}
				})
			},
			hexToRgba(hex, alpha) {
				// 去除可能的'#'字符并检查长度
				hex = hex.replace('#', '');
				if (hex.length !== 6) {
					return '';
				}

				// 解析十六进制为十进制
				let r = parseInt(hex.substr(0, 2), 16);
				let g = parseInt(hex.substr(2, 2), 16);
				let b = parseInt(hex.substr(4, 2), 16);

				// 返回RGBA格式的字符串
				return `rgba(${r}, ${g}, ${b}, ${alpha})`;
			},
			calcColor(color) {
				return this.hexToRgba(color, 0.3)
			},
			editInfo() {
				uni.navigateTo({
					url: '/pagesA/edit/editEnterpriseInformation'
				})
			},
			editCompany() {
				uni.navigateTo({
					url: '/pagesA/edit/editProfile'
				})
			},
			preview() {
				console.log(this.info.userProfileDO.realName);
				if (!this.info.userProfileDO.realName) {
					uni.showModal({
						title: '提示',
						content: '您还未完善个人信息，无法分享',
						confirmText: '去完善',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pagesA/edit/editEnterpriseInformation'
								})
							}
						}
					})
					return false
				}
				if (!this.info.companyProfileDO.companyName) {
					uni.showModal({
						title: '提示',
						content: '您还未完善企业信息，无法分享',
						confirmText: '去完善',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pagesA/edit/editProfile'
								})
							}
						}
					})
					return false
				}
				const userId = uni.getStorageSync('userId')
				uni.navigateTo({
					url: `/pagesA/share/card?id=${userId}&encrypted=${this.info.userProfileDO.level}`
				})
			},
			addModule() {
				uni.navigateTo({
					url: '/pagesA/edit/selectModule'
				})
			},
			setSort(key, index) {
				uni.showActionSheet({
					itemList: index === 0 ? ['下移'] : index === (this.modules.length - 1) ? ['上移', ] : ['上移', '下移'],
					success: (res) => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						let index2 = -1; // 第二个元素的索引
						if (index === 0) {
							index2 = index + 1; // 第二个元素的索引
						} else if (index === (this.modules.length - 1)) {
							index2 = index - 1
						} else {
							if (res.tapIndex === 0) {
								index2 = index - 1
							} else {
								index2 = index + 1
							}
						}
						// 使用解构赋值交换
						[this.modules[index], this.modules[index2]] = [this.modules[index2], this.modules[
							index]];
						console.log(this.modules)
						http({
							url: 'card/user-profile/sort/update',
							method: 'put',
							data: {
								sort: this.modules.join(',')
							}
						}).then(res => {
							if (res.code === 0) {
								uni.showToast({
									title: '编辑成功',
									icon: "success"
								});
								// this.modules = []
								// this.getData()
							}
						})
					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				});
			},
			goEdit(key) {
				if (key === 'companyImpression') {
					uni.navigateTo({
						url: '/pagesA/module/corporateImpression'
					})
				} else if (key === 'companyVideo') {
					uni.navigateTo({
						url: '/pagesA/module/uploadVideo'
					})
				} else if (key === 'companyComments') {
					uni.navigateTo({
						url: '/pagesA/module/introduce'
					})
				} else if (key === 'companyIntroImg') {
					uni.navigateTo({
						url: '/pagesA/module/introduceImg'
					})
				} else if (key === 'address') {
					uni.navigateTo({
						url: '/pagesA/module/address'
					})
				} else if (key === 'companyIntro') {
					uni.navigateTo({
						url: '/pagesA/module/myIntroduce'
					})
				} else if (key === 'myImpression') {
					uni.navigateTo({
						url: '/pagesA/module/myImpression'
					})
				}
			},
			remove(index) {
				debugger
				this.modules.splice(index, 1)
				http({
					url: 'card/user-profile/sort/update',
					method: 'put',
					data: {
						sort: this.modules.join(',')
					}
				}).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '编辑成功',
							icon: "success"
						});
						// this.modules = []
						// this.getData()
					}
				})
			},
			getData() {
				http({
					url: 'card/user-profile/get'
				}).then(res => {
					if (res.code === 0) {
						const data = {
							...res.data
						}
						try {
							data.companyProfileDO.address = (data.companyProfileDO.address ? JSON.parse(data
								.companyProfileDO.address) : {})
							if (res.data.companyProfileDO.address) {
								this.covers[0].latitude = res.data.companyProfileDO.address.latitude
								this.covers[0].longitude = res.data.companyProfileDO.address.longitude
							}
							data.companyProfileDO.companyImpression = (data.companyProfileDO.companyImpression ?
								JSON.parse(data.companyProfileDO.companyImpression) : [])
							data.companyProfileDO.myImpression = (data.companyProfileDO.myImpression ? JSON.parse(
								data.companyProfileDO.myImpression) : [])
							data.companyProfileDO.companyComments = (data.companyProfileDO.companyComments ? JSON
								.parse(data.companyProfileDO.companyComments) : {
									content: '',
									imgs: []
								})
							data.companyProfileDO.companyIntroImg = (data.companyProfileDO.companyIntroImg ? JSON
								.parse(data.companyProfileDO.companyIntroImg) : [])
						} catch (e) {
							//TODO handle the exception
							data.companyProfileDO.address = {}
							data.companyProfileDO.companyImpression = []
							data.companyProfileDO.myImpression = []
							data.companyProfileDO.companyComments = {
								content: '',
								imgs: []
							}
							data.companyProfileDO.companyIntroImg = []

						}
						this.info = data
						const modules = res.data.companyProfileDO.sort ? res.data.companyProfileDO.sort.split(
							',') : []
						this.modules = modules
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;

		// padding-bottom: calc(140rpx + var(--safe-area-inset-bottom));
		.top {
			// height: 918rpx;
			height: 838rpx;
			padding: 60rpx 30rpx 0;

			&.top2 {
				height: 1104rpx;
			}

			background-image: linear-gradient(180deg, #4B73FF, #FFFFFF);

			.section {
				height: 617rpx;
				border-radius: 20rpx;
				background: #EEF2FF;

				.section-top {
					height: 117rpx;
					position: relative;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #333333;
					line-height: 117rpx;
					padding-left: 42rpx;

					.avatar {
						width: 150rpx;
						height: 150rpx;
						background: #FFFFFF;
						border-radius: 50%;
						border: 6rpx solid #90BCFF;
						position: absolute;
						z-index: 10;
						right: 40rpx;
						top: 40rpx;
						// padding: 6rpx 0 0 6rpx;
						box-sizing: border-box;
						overflow: hidden;

						image {
							// width: 138rpx;
							// height: 138rpx;
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}

				.section-bottom {
					height: 500rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					// background-image: url('/static/images/pic.png');
					// background-size: 262rpx 278rpx;
					// background-position: 388rpx 152rpx;
					position: relative;

					.background-icon {
						width: 262rpx;
						height: 278rpx;
						position: absolute;
						right: 40rpx;
						bottom: 70rpx;
					}

					.section-bottom-content {
						padding: 40rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						position: relative;
						z-index: 9;

						.item-section {
							display: flex;
							// align-items: center;
							font-weight: bold;
							line-height: 48rpx;

							image {
								width: 48rpx;
								height: 48rpx;
								margin-right: 30rpx;
							}

							text {
								flex: 1;
							}

							&.address {
								line-height: 50rpx;
							}
						}
					}

					.edit-btn {
						width: 180rpx;
						height: 70rpx;
						line-height: 70rpx;
						text-align: center;
						background: #DDE5FF;
						border-radius: 20rpx 0px 20rpx 0px;
						font-weight: 500;
						font-size: 28rpx;
						color: #7495FF;
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}
			}

			.red-envelope {
				margin-top: 30rpx;

				image {
					width: 100%;
				}
			}

			.action-section {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				.action-btn {
					// width: 335rpx;
					flex: 1;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #4B73FF;
					border-radius: 20rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;

					&:nth-child(2) {
						background: #FFAC4B;
						margin: 0 20rpx;
					}

					&.btn3 {
						// background: #EAFBF5;
						// color: #17B185;
						background: #07c160;
						color: #FFFFFF;
					}
				}
			}

			.num-box {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #999999;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.bottom {
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px #EEEEEE;
			border-radius: 40rpx 40rpx 0 0;

			.introduce-item {
				box-shadow: 0px 0px 20rpx 0px #EEEEEE;
				border-radius: 40rpx 40rpx 0 0;
				padding-top: 50rpx;

				.title {
					font-weight: bold;
					font-size: 34rpx;
					color: #333333;
					padding-left: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.right {
						padding-right: 30rpx;

						image {
							width: 70rpx;
							height: 70rpx;

							&:nth-child(2) {
								margin: 0 20rpx;
							}
						}
					}
				}

				.introduce-item-content {
					padding: 40rpx 30rpx 50rpx;

					.tag {
						width: 207rpx;
						height: 70rpx;
						text-align: center;
						line-height: 70rpx;
						background: #EAFBF5;
						border-radius: 35rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #17B185;
						margin-right: 20rpx;

						&.tag2 {
							background: #EAF1FB;
							color: #175FB1;
						}
					}

					.item-content {
						width: 217rpx;
						height: 192rpx;
						background: #F4F7FF;
						border-radius: 20rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;

						.num {
							font-family: DIN Next LT Pro;
							font-size: 50rpx;
						}
					}

					.placeholder {
						height: 400rpx;
						background: #F4F7FF;
						border-radius: 20rpx;
						overflow: hidden;

						video {
							width: 100%;
							height: 100%;
						}
					}

					image {
						width: 100%;
						height: 400rpx;
						border-radius: 20rpx;
						margin-bottom: 20rpx;
					}

					.swiper {
						margin-bottom: 20rpx;
					}

					.text {
						font-size: 28rpx;
					}

					.map {
						map {
							width: 100%;
							height: 400rpx;
						}
					}

					.add-btn {
						height: 240rpx;
						background: #F3F6FF;
						border-radius: 20rpx;
						border: 2rpx dashed #A7BBFF;
						font-weight: bold;
						font-size: 34rpx;
						color: #C3D0FF;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 123rpx;
							height: 136rpx;
							margin-right: 50rpx;
						}
					}
				}
			}
		}
	}
</style>